<script setup lang="ts">
import { LikeOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const selectedKeys = ref<string[]>(['1']);

const router = useRouter()
const routes = router.getRoutes()
// console.info(routes)
const ignorePath = ['/charts/eCHengTiaoTu', '/charts/eCZheZhuTu', '/Hello']

const pathNameMap: { [key: string]: { [key: string]: string } } = {
  "/charts/eCBingZhuangTu": {
    name: "饼状图",
    icon: "PieChartOutlined",
  },
  "/charts/eCKXianTu": {
    name: "k线图",
    icon: "SlidersOutlined"
  },
  "/charts/eCLouDouTu": {
    name: "漏斗图",
    icon: "FunnelPlotOutlined"
  },
  "/charts/eCSanDianTu": {
    name: "散点图",
    icon: "DotChartOutlined"
  },
  "/charts/eCShuXingTu": {
    name: "折线树图",
    icon: "ClusterOutlined"
  },
  "/charts/eCXianXingTu": {
    name: "折线图",
    icon: "LineChartOutlined"
  },
  "/charts/eCYiBiaoTu": {
    name: "仪表图",
    icon: "DashboardOutlined",
  },
  "/charts/eCZhuZhuangTu": {
    name: "柱状图",
    icon: "BarChartOutlined"
  },
  "/charts/g2BingZhuangTu": {
    name: "饼状图",
    icon: "PieChartOutlined",
  },
  "/charts/g2CiYunTu": {
    name: "词云",
    icon: "FontColorsOutlined"
  },
  "/charts/g2JinDuTu": {
    name: "进度图",
    icon: "PieChartOutlined",
  },
  "/charts/g2LouDouTu": {
    name: "漏斗图",
    icon: "FunnelPlotOutlined"
  },
  "/charts/g2MianJiTu": {
    name: "面积图",
    icon: "AreaChartOutlined"
  },
  "/charts/g2SanDianTu": {
    name: "散点图",
    icon: "DotChartOutlined"
  },
  "/charts/g2TiaoXingTu": {
    name: "条形图",
  },
  "/charts/g2ZheXianTu": {
    name: "折线图",
    icon: "LineChartOutlined"
  },
  "/charts/g2ZhuZhuangTu": {
    name: "柱状图",
    icon: "BarChartOutlined"
  },
  "/charts/g2ZiDanTu": {
    name: "子弹图",
  },
};
</script>

<template>
  <a-layout>
    <a-layout-sider>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item>
          <RouterLink to="/Hello">
            <LikeOutlined />
            <span>Hello</span>
          </RouterLink>
        </a-menu-item>
        <template v-for="(item, idx) in routes">
          <a-menu-item :key="idx" v-if="ignorePath.indexOf(item.path) == -1">
            <RouterLink :to="item.path">
              <!-- <BarsOutlined /> -->
              <component :is="$antIcons[pathNameMap[item.path]?.icon || 'BarsOutlined']" />
              <span>{{ pathNameMap[item.path]?.name || item.path }}</span>
            </RouterLink>
          </a-menu-item>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout-content>
      <router-view />
    </a-layout-content>
  </a-layout>
</template>

<style scoped>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}

#root,
body,
html {
  height: 100%;
}

.ant-layout {
  display: flex;
  width: 100%;
  min-height: 100%;
}
</style>
